<template>
	<div>
		<div style="width: 100%;display: flex;">
			<h4>教务处--教学安排</h4>
		</div>
		<hr>
		<div style="width: 100%;display: flex;flex-direction:column;">
			
			<div style="display: flex;flex-direction: row;justify-content: space-around;">
				<p>教师:
					<select v-model="data.task.user.uid">
						<option v-for="t in data.teas" 
							v-bind:value="t.uid" 
							v-bind:selected="data.task.user.uid == t.uid">
							{{t.uname}}
						</option>
					</select>
				</p>
				<p>班级:
					<select v-model="data.task.clz.clzno">
						<option v-for="c in data.clzs" 
							v-bind:value="c.clzno" 
							v-bind:selected="data.task.clz.clzno == c.clzno">
							{{c.clzname}}
						</option>
					</select>
				</p>
				<p>课程:
					<select v-model="data.task.course.cno">
						<option v-for="c in data.courses" 
							v-bind:value="c.cno" 
							v-bind:selected="data.task.course.cno == c.cno">
							{{c.cname}}
						</option>
					</select>
				</p>
				<p><button @click="doAdd()">添加新的课程安排</button></p>
			</div>
			<div style="margin-bottom: 5%;">
				<table border="1" style="width: 95%">
					<tbody>
						<tr style="background-color: gainsboro">
							<th>教师编号</th>
							<th>教师名称</th>
							<th>班级编号</th>
							<th>班级名称</th>
							<th>课程编号</th>
							<th>课程名称</th>
							<th>操作</th>
						</tr>
						<tr v-for="t in data.tasks">
							<td>{{t.user.uid}}</td>
							<td>{{t.user.uname}}</td>
							<td>{{t.clz.clzno}}</td>
							<td>{{t.clz.clzname}}</td>
							<td>{{t.course.cno}}</td>
							<td>{{t.course.cname}}</td>
							<td><button @click="del(t.kid)">删除</button></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { onMounted, reactive } from 'vue';
	import { $postj,$get } from '@/ajax';
	
	const data = reactive({
		teas:[],
		clzs:[],
		courses:[],
		tasks:[],
		task:{
			kid:0,
			user:{uid:0},
			clz:{clzno:0},
			course:{cno:0}
		}
	})
	
	const del = (kid) => {
		console.log("删除安排的表id=" + kid)
		//初始化班级
		$get(`/api/adm/task/del/`+kid)
		.then((resp) => {
			console.log(resp.data);
			data.tasks = resp.data.data;
		})
	}
	const doAdd = () => {
		$postj(`/api/adm/task/add`,data.task)
		.then((resp) =>{
			console.log(resp.data);
			data.tasks = resp.data.data;
		})
	}
	
	onMounted(()=>{
		
		//初始化班级
		$get(`/api/public/getClzs`)
		.then((resp) => {
			console.log("初始化班级")
			data.clzs = resp.data.data
		})
		
		//初始化课程
		$get(`/api/public/getCourses`)
		.then(resp => {
			console.log("初始化课程")
			data.courses = resp.data.data
		})
		
		//初始化教师
		$get(`/api/public/getTeachers`)
		.then(resp => {
			console.log("初始化教师")
			data.teas = resp.data.data
		})
		
		//初始化教学安排
		$get(`/api/adm/task/findAll`)
		.then(resp => {
			console.log("初始化教学安排")
			data.tasks = resp.data.data
		})
	})
	
	
	
</script>

<style>
	select{
		width: 14vw;
	}
	td{
		font-size: 0.8em;
	}
</style>